<div id="contenedorIncluirPregunta" >
	<div id="textoAgregarPregunta">
		<p   style="font-size: 15px; text-align:left;"  >Selecciona un tema, un nivel y escribe el enunciado de la pregunta que deseas introducir. <br>
			Para introducir una pregunta asociada a esta pregunta pincha en Agregar respuesta. <br>
			Para guardar la pregunta pincha en guardar.
		</p>
	</div>
	<br/>
	<form class="form-horizontal" method="post" id="incluir_pregunta" >
		<fieldset style="text-align:left">
			<div id="asignatura" class="form-group">
				<label  for="asignaturas" class="col-xs-3 col-sm-2 control-label">Tema:</label> 
				<div class="col-xs-10 col-sm-5">
					<select id="asignaturas" name="idAsignatura" class="form-control " required>
						<option value="">-- Tema --</option>
					</select>
				</div>
			</div>
			<div id="nivel" class="form-group">
				<label  for="dificultades" class="col-xs-3 col-sm-2 control-label">Nivel:</label>
				<div class="col-xs-10 col-sm-5">
					<select id="dificultades" name="idDificultad" class="form-control" required>
						<option value="">-- Nivel --</option>
					</select>
				</div>
			</div>
			<div id="pregunta" class="form-group">
				<label  for="pregunta" class="col-xs-3 col-sm-2 control-label">Pregunta:</label>
				<div class="col-xs-10 col-sm-5">
					<textarea name="pregunta" id="pregunta" placeholder="Aqui tu pregunta" class="form-control" required></textarea>
				</div>
			</div>
			<input type="submit" id="respuesta"  value="Agregar respuesta" class="btn btn-primary"/>
			<input type="submit" id="guardar" value="Guardar" class="btn btn-primary"/>
			<input type="reset" value="Cancelar" class="btn btn-primary"/>
		</fieldset>
	</form>
</div>
	
<script>

$(document).one("ajaxComplete", formulario);

function formulario() {
	
	// Cargar asignatura
	var $asignaturas = $('#asignaturas');
	var urlAsignatura = "../dispatcher/referencias/asignaturas";
	

	$.getJSON(urlAsignatura, function(datos) {
		$.each(datos, function(i, item) {
			$asignaturas.append('<option value="'+ item.id +'">'+ item.nombre + '</option>');
			$asignaturas.append(item.nombre);
		});

	});

	// Cargar dificultades
	var $dificultades = $('#dificultades');
	var urlDificultad = "../dispatcher/referencias/dificultad";

	$.getJSON(urlDificultad,function(data) {
		$.each(data,function(i, item) {
			$dificultades.append('<option value="'+ item.id +'">'+ item.label+ '</option>')
			$dificultades.append(item.label);
		});
	}); 
};

// Para hacer el submit del formulario
$("#guardar").click(function(){
		
	$('form').submit(function(event) {
		 
		event.preventDefault();

		var data = JSON.stringify($('form').serializeObject());
		$.ajax({
			type: "POST",
			url: "../dispatcher/pregunta/incluirPregunta",
			data: data,
			beforeSend: function(xhr) {  
					xhr.setRequestHeader("Accept", "application/json");  
					xhr.setRequestHeader("Content-Type", "application/json");  
			},  
			success: function (datos) {
					idPreguntaSeleccionada=datos;    
					alert("Pregunta agregada");
		    },
		    complete:function(){
	            $("form").each(function(){
	                this.reset();
	            });
	     	},
		    error : function (data, status, er) {
				alert("error" + data + " status " +status+" er:"+er );
			}
		}); 
	}); 
});

var idPreguntaSeleccionada;

function cargar(idPreguntaSeleccionada){
	$('#contenedorIncluirPregunta').load('gestionPreguntaRespuesta/incluirRespuestaPregunta.html', { idPreguntaSeleccionada: idPreguntaSeleccionada });
} 
 
$("#respuesta").click(function(){
	$('form').submit(function(event) {
		 
		event.preventDefault();

		var data = JSON.stringify($('form').serializeObject());
		$.ajax({
	        type: "POST",
	        url: "../dispatcher/pregunta/incluirPregunta",
	        data: data,
	        beforeSend: function(xhr) {  
	             xhr.setRequestHeader("Accept", "application/json");  
	             xhr.setRequestHeader("Content-Type", "application/json");  
	        },  
	        success: function (datos) {
	        	idPreguntaSeleccionada = datos;  

                alert("Pregunta agregada");

	         	cargar(idPreguntaSeleccionada);
	        },
	        error : function (data, status, er) {
	         	alert("error" + data + " status " +status+" er:"+er );
	        } 
		}); 
	});
});
</script>